<template>
	<view>
		
		<!-- <uni-search-bar @confirm="search" :focus="false" v-model="searchValue" @input="input"
			@cancel="cancel" @clear="clear">
		</uni-search-bar> -->
		<view style="padding: 0 14px;">
			<button type="default" @click="showFolder()" style="font-size: 14px;">
				{{currentTypeName}}<uni-icons type="bottom" size="18" color="#999"></uni-icons>
			</button>
		</view>
		<view >
			
			<uni-card :is-shadow="false" v-for="(item,index) in list" :key="index" @click="showNote(item.tid)">
				<text class="uni-body" selectable :id="contentId(index)" >
					{{item.title}}
				</text>
			</uni-card>
		</view>
		
		<!-- 文件夹列表弹出层 -->
		<uni-drawer ref="showFolderDrawer" mode="right" :mask-click="true" >
			<scroll-view class="scroll-view-box" scroll-y="true" @touchmove.stop>
				<view class="container">
					<button type="default" size="mini" @click="showCreateFolderDialog()" style="font-size: 14px;">
						新建
					</button>
					<uni-swipe-action>
						<uni-swipe-action-item  v-for="(item,index) in noteTypes" :key="index">
							<view class="content-box" @click="chooseType(item.nt_id,item.nt_name)">
								<text class="content-text">{{item.nt_name}}</text>
							</view>
							<template v-slot:right v-if="item.nt_id != 1">
								<view class="edit-button" @click="showModifyFolderDialog(item.nt_id,item.nt_name)">
									<text class="slot-button-text">编辑</text>
								</view>
								<view class="slot-button" @click="delTypeById(item.nt_id)">
									<text class="slot-button-text">删除</text>
							</view>
							</template>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</scroll-view>
		</uni-drawer>
		
		<!-- 新建文件夹输入框 -->
		<uni-popup ref="createFolderDialog" type="dialog">
			<uni-popup-dialog  mode="input" title="新建文件夹" 
				placeholder="" 
				@confirm="doCreateFolderDialog" 
				@close="closeFolderDialog"
				:before-close="true"></uni-popup-dialog>
		</uni-popup>
		<!-- 修改文件夹输入框 -->
		<uni-popup ref="modifyFolderDialog" type="dialog">
			<uni-popup-dialog  mode="input" title="修改文件夹" 
				placeholder="" 
				:value="showFolderInfo.name"
				@confirm="doModifyFolder" 
				@close="closeFolderDialog"
				:before-close="true"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {getNotes} from '@/api/note.js'
	import {getNoteTypes,saveNoteType,recycleNoteType,updateNoteType} from '@/api/noteType.js'
	
	export default {
		data() {
			return {
				searchValue: '',
				list:[],
				noteTypes:[],
				currentTypeName:"",
				currentTypeId:"",
				showFolderInfo:{ // 编辑文件夹名称
					id:"",
					name:"", 
				}
				
			};
		},
		onShow(){
			const index_ajax_type = uni.getStorageSync('index_ajax_type')
			uni.setStorageSync('index_ajax_type', "")
			// console.log("index_ajax_type:",index_ajax_type)
			if(index_ajax_type == "init"){
				setTimeout( () => {
					uni.startPullDownRefresh()
				},100)
				
			}else if(index_ajax_type == "update_notes_notetypes"){
				this.getNotes()
				this.getNoteTypesOnly()
			}else if(index_ajax_type == "update_notetypes"){
				this.getNoteTypesOnly()
			}else{
				setTimeout( () => {
					uni.startPullDownRefresh()
				},100)
			}
			
		},
		onLoad() {
			// uni.startPullDownRefresh()
			
			// this.getNoteTypes()
		},
		onPullDownRefresh() { // 响应下拉事件
			//console.log("响应 onPullDownRefresh 事件")
			this.getNoteTypes()
		},
		methods: {
			getNotes(){
				// console.log("getNotes() this.currentTypeId:",this.currentTypeId)
				getNotes(this.currentTypeId,"").then( res => {
					// console.log("sucess:",res)
					this.list = res.data
					uni.stopPullDownRefresh();
				})
			
			},
			/**
			 * 获取分类、然后获取当前笔记
			 * 初始化用
			 */
			getNoteTypes(){
				getNoteTypes().then( res => {
					// console.log("noteTypes:",res)
					this.noteTypes = res.data
					if(this.noteTypes != null && this.noteTypes.length >0){
						this.currentTypeName = this.noteTypes[0].nt_name
						this.currentTypeId = this.noteTypes[0].nt_id
					}
					
					// console.log("this.currentTypeId:",this.currentTypeId)
					this.getNotes()
					uni.stopPullDownRefresh();
				})
			
			},
			/**
			 * 只获取分类
			 */
			getNoteTypesOnly(){
				getNoteTypes().then( res => {
					// console.log("noteTypes:",res)
					this.noteTypes = res.data
				})
			
			},
			/**
			 * 显示笔记详细内容
			 * @param {Object} tid
			 */
			showNote(tid){
				// console.log("tid:",tid)
				uni.navigateTo({
					url: `list?tid=${tid}`,
					// events: {
					// 	navReloadEvent:(data) => {
					// 		// console.log("navReloadEvent:",data)
					// 		// uni.startPullDownRefresh()
							
					// 		this.getNotes()
					// 		this.getNoteTypesOnly()
					// 	}
					// }
				});
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			contentId(id){
				return "content_"+id
			},
			// 显示文件夹列表弹出层
			showFolder(){
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.showFolderDrawer.open()
			},
			delTypeById(id){
				// console.log("id:",id)
				recycleNoteType(id).then( res => {
					if(res.code == 0){
						this.getNoteTypes()
					}else{
						
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			/**
			 * 选择分类
			 * @param {Object} id
			 * @param {Object} name
			 */
			chooseType(id,name){
				this.currentTypeId = id
				this.currentTypeName = name
				this.$refs.showFolderDrawer.close()
				
				// uni.startPullDownRefresh();
				this.getNotes()
			},
			/**
			 * 显示创建文件夹对话框
			 */
			showCreateFolderDialog(){
				
				this.$refs.showFolderDrawer.close()
				this.$refs.createFolderDialog.open()
			},
			/**
			 * 显示当前文件件名称
			 */
			showModifyFolderDialog(id,name){
				this.showFolderInfo.id = id
				this.showFolderInfo.name = name
				
				this.$refs.showFolderDrawer.close()
				this.$refs.modifyFolderDialog.open()
				
				
			},
			/**
			 * 关闭创建文件夹窗口
			 */
			closeFolderDialog(){
				this.$refs.createFolderDialog.close()
				this.$refs.showFolderDrawer.open()
			},
			/**
			 * 点击创建文件夹窗口的【确定】按钮
			 */
			doCreateFolderDialog(val){
				if(val === ""){
					uni.showToast({
						icon: 'none',
						title: "请输入文件夹名"
					})
					return
				}
				saveNoteType(val).then( res =>{
					if(res.code == 0){
						
						this.getNoteTypes()
						this.$refs.createFolderDialog.close()
						this.$refs.showFolderDrawer.open()
					}else{
						
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			/**
			 * 执行修改文件件
			 * @param {Object} val
			 */
			doModifyFolder(val){
				if(val === ""){
					uni.showToast({
						icon: 'none',
						title: "请输入文件夹名"
					})
					return
				}
				updateNoteType(this.showFolderInfo.id,val).then( res => {
					if(res.code == 0){
						// 如果修改的是当前选择的文件夹，那么同时修该文件件名
						if(this.currentTypeId == this.showFolderInfo.id){
							this.currentTypeName = val
						}
						this.getNoteTypesOnly()
						
						this.$refs.showFolderDrawer.open()
						this.$refs.modifyFolderDialog.close()
					}
				})
			},
		},
		onNavigationBarButtonTap(e) {
			// console.log(e.text);//提交
			if(e.text === '新建'){
				// console.log(111)
				uni.navigateTo({
					url: `./new?typeId=${this.currentTypeId}&typeName=${this.currentTypeName}`,
					events: {
						navReloadEvent:(data) => {
							// console.log("navReloadEvent:",data)
							// setTimeout( () => {
							// 	uni.startPullDownRefresh()
							// },100)
							
							this.getNotes()
							this.getNoteTypesOnly()
						}
					}
				});
			}else if(e.text === '设置'){
				uni.navigateTo({
					url: './setting',
				});
			}
			
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 10px;
	}
	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.example-body {
		padding: 10px;
	}
	
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}
	.edit-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #007aff
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>
